<template>
  <div>面包屑组件</div>

  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: tag.path }" v-for="tag in tags">
      <!-- v-for="(tag, index) in tags" -->

      <el-tag
        :key="tag"
        class="mx-1"
        closable
        :disable-transitions="false"
        @close="handleClose(tag)"
        :effect="$route.path === '/' + tag.name ? 'dark' : 'plain'"
      >
        {{ tag.authName }}
      </el-tag>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup>
import { useStore } from 'vuex'

import { computed } from 'vue'

import { useRoute, useRouter } from 'vue-router'

const store = useStore()

const route = useRoute()

console.log(route)

const tags = computed(() => store.state.tabsList)

const handleClose = (tag) => {
  // alert('xxx')
  store.commit('closeMenu', tag)
}
</script>

<style lang="scss" scoped></style>
